<template>
    <view>
        <view class="parsing-header u-flex">
            <view class="header-lebal" v-if="!$u.test.empty(parsing.points)"
                >考点：</view
            >
            <view
                class="header-title u-line-1"
                v-if="!$u.test.empty(parsing.points)"
                >{{ `${parsing.points}` }}</view
            >
            <view @click="headClick" class="header-icon-wrap">
                {{ isShow ? "收起解析" : "查看解析" }}
                <u-icon
                    name="arrow-up"
                    :class="{ 'arrow-down-icon-active': !isShow }"
                    class="arrow-down-icon"
                ></u-icon>
            </view>
        </view>
        <view class="parsing-body" v-show="isShow">
            <view class="parsing-body__answer u-clearfix">
                <view class="label">正确答案：</view>
                <template v-if="parsing.question_type == 5">
                    <view
                        class="content"
                        v-for="(item, index) in answer"
                        :key="index"
                        >{{ `(${index + 1})${item}` }}</view
                    >
                </template>
                <template v-if="parsing.question_type == 8">
                    <view class="content"
                        ><rich-text :nodes="answer"></rich-text
                    ></view>
                </template>
                <view class="content" v-else>{{ answer }}</view>
            </view>
            <view
                class="parsing-body__analyze u-flex u-col-top"
                v-if="parsing.analyze"
            >
                <view class="label">解析：</view>
                <view class="content">
                    <rich-text :nodes="parsing.analyze"></rich-text>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    props: {
        // 数据
        parsing: {
            type: Object,
            default: () => {
                return {};
            },
        },
    },
    data() {
        return {
            isShow: true,
        };
    },
    computed: {
        answer() {
            let answer;
            if (
                this.$edu.test.inArray(this.parsing.question_type, [1, 2, 3, 4])
            ) {
                answer = this.parsing.options.filter(
                    (item) => item.is_right == 1
                );
            } else if (this.parsing.question_type == 5) {
                answer = this.parsing.options.map((item) => item.values);
                return answer;
            } else if (this.parsing.question_type == 8) {
                answer = this.parsing.reference_answer;
                return answer;
            } else {
                answer = this.parsing.topics.map((ele) => {
                    return ele.options.find((item) => item.is_right == 1);
                });
            }
            return answer.map((item) => item.key).toString();
        },
    },
    methods: {
        headClick() {
            this.isShow = !this.isShow;
        },
    },
};
</script>
<style lang="scss" scoped>
.parsing-header {
    margin-bottom: 30rpx;
    .header-lebal {
        font-size: 28rpx;
        color: #303133;
    }
    .header-title {
        font-size: 28rpx;
        color: #606266;
        max-width: 360rpx;
    }
    .header-icon-wrap {
        padding: 10rpx 0;
        margin-left: auto;
        font-size: 28rpx;
        color: #303133;
    }
    .arrow-down-icon {
        transition: all 0.3s;
        margin-left: 14rpx;
    }
    .arrow-down-icon-active {
        transform: rotate(180deg);
        transform-origin: center center;
    }
}
.parsing-body {
    transition: all 0.3s;
    &__answer {
        margin-bottom: 15rpx;
        .label {
            float: left;
            font-size: 30rpx;
            color: #67c23a;
        }
        .content {
            font-size: 30rpx;
            color: #303133;
        }
    }
    &__analyze {
        .label {
            white-space: nowrap;
            font-size: 30rpx;
            color: #303133;
        }
        .content {
            width: calc(100vw - 90px);
        }
    }
}
</style>
